<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>波浪形加载组件</title>
</head>
<style>
	body {
	    height: 100vh;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    background-color: #e8e8e8;
	}
	
	.loading-wave {
	    width: 300px;
	    height: 100px;
	    display: flex;
	    justify-content: center;
	    align-items: flex-end;
	}
	
	.loading-bar {
	    width: 20px;
	    height: 10px;
	    margin: 0 5px;
	    background-color: #3498db;
	    border-radius: 5px;
	    animation: loading-wave-animation 1s ease-in-out infinite;
	}
	
	.loading-bar:nth-child(2) {
	    animation-delay: 0.1s;
	}
	
	.loading-bar:nth-child(3) {
	    animation-delay: 0.2s;
	}
	
	.loading-bar:nth-child(4) {
	    animation-delay: 0.3s;
	}
	
	@keyframes loading-wave-animation {
	    0% {
	        height: 10px;
	    }
	
	    50% {
	        height: 50px;
	    }
	
	    100% {
	        height: 10px;
	    }
	}
</style>
<body>
    <div class="loading-wave">
        <div class="loading-bar"></div>
        <div class="loading-bar"></div>
        <div class="loading-bar"></div>
        <div class="loading-bar"></div>
    </div>
</body>

</html>